<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script src="./vue.global.js"></script>
    
</head>
<body>
    
    <!-- {{}}的优先级低于v-text -->
    <!-- v-show和v-if运行方式不同，-show适用于要多次判断的情况 -->
    <!-- v-html是能渲染HTML的指令 -->
    <!-- v-bind动态绑定 :class => v-bind:class -->
    <!-- 停止冒泡 -->
    <div id="counter">
        <!-- Counter: {{ counter }}
        <br>
        <input v-model="message" placeholder="edit me" />
        <br>
        {{message}}
        <span style="color: red;" v-show="message==='show'">显示</span>
        <br>
        <div v-for="item in studentslist" ::key="item.index">
            {{ item.name }}  --{{item.sno}}
        </div>
        <div class="text" v-text="obj.name">{{obj.name}}</div>
        <textarea name="" id="" cols="50" rows="10" v-model="myHB">

        </textarea>
        <span v-html="myHB"></span>

        <div class="clik" v-on:click="click" v-bind:class="myHB === 'show'? 'red':'green' " v-bind:style="{color: myHB === 'show'? 'red':'green'}">click</div> -->
        <input type="text" v-focus="'今天周五'">
    </div>



</body>
<script src="./index.js"></script>
</html>